<template>
  <view class="content">
    <view class="sub-box">
      <u-subsection
        :list="list"
        :current="curNow"
        @change="sectionChange"
        height="100"
        buttonColor="#FF6B3D"
        activeColor="#FFFFFF"
        fontSize="40"
      ></u-subsection>
    </view>
    <view class="btn-warp" v-if="btnShow">
      <view @click="jump_assess" class="btn-box">
        <bigBtn
          :btnBoxWidth="btnBoxWidthX"
          :btnBoxHeight="btnBoxHeightX"
          :btnColor="btnColorX"
          :btnImgSrc="btnImgSrcX"
          :btnText="btnTextX"
          :btnTextColor="btnTextColorX"
          :btnTextSize="btnTextSizeX"
          :btnImgWidth="btnImgWidthX"
          :btnRadius="btnRadiusX"
          btnEColor="#3FB8DA"
          btnFColor="#53D7AD"
          warpBorderColor="#5FD6B8"
        >
        </bigBtn>
      </view>
    </view>
    <view class="rank-warp" v-else>
      <view class="rank-title-box">
        <view class="title">
          <view>
            <image
              src="../../../static/icon/recovery_assess/rank.png"
              style="width: 70rpx; height: 70rpx"
            >
            </image>
          </view>
          <view>最近评分</view>
        </view>
        <view class="seg"></view>
        <view class="scoreNumber">{{ rank }}</view>
      </view>
      <view class="scroll-box">
        <scroll-view
          :scroll-top="scrollTop"
          scroll-y="true"
          class="scroll-Y"
          @scrolltoupper="upper"
          @scrolltolower="lower"
          @scroll="scroll"
        >
          <view
            id="demo1"
            class="scroll-view-item uni-bg-red"
            v-for="(item, index) in dataList"
            :key="index"
          >
            <view class="front-rank">
              <view
			  class="rank-icon"
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <image
                  src="../../../static/icon/recovery_assess/first.png"
                  style="width: 100rpx; height: 100rpx"
                  v-if="index == 0"
                ></image>
                <image
                  src="../../../static/icon/recovery_assess/second.png"
                  style="width: 100rpx; height: 100rpx"
                  v-if="index == 1"
                ></image>
                <image
                  src="../../../static/icon/recovery_assess/third.png"
                  style="width: 100rpx; height: 100rpx"
                  v-if="index == 2"
                ></image>
                <view
                  v-if="index != 0 && index != 1 && index != 2"
                  class="rankBox"
                  >{{ index + 1 }}</view
                >
              </view>
              <view class="name">{{ item.score }}</view>
              <video
                :id="item.after_url"
                :src="item.after_url"
                v-show="isOpenVideo"
                @fullscreenchange="fullscreenchange"
              ></video>
              <view class="handle-btn" @click="previewReport(item)">报告</view>
              <view class="handle-btn" @click="playVideo(item.after_url)">视频</view>
              <!-- <view class="video-link"  @click="playVideo(item.after_url)">  
								<text>视频</text>  
							</view> -->

              <!-- <video v-if="showVideo[index]" :id="`myVideo${index}`" :src="item.after_url" controls="controls" style="display: block;"></video>
							 -->
            </view>
            <view class="score">{{ item.time.slice(0, 10) }}</view>
          </view>
        </scroll-view>
      </view>
    </view>
    <view>
      <u-modal v-model="show" :content="content"></u-modal>
    </view>
  </view>
</template>

<script>
import bigBtn from "@/components/bigButton.vue";
import loginVue from "../../my_module/login/login.vue";
export default {
  components: {
    bigBtn,
  },
  data() {
    return {
      isOpenVideo: false,
      videoContext: null,
      dataList: [
        {
          name: "谢广坤",
          score: 1270,
        },
        {
          name: "谢广坤",
          score: 2511,
        },
        {
          name: "谢广坤",
          score: 556,
        },
        {
          name: "谢广坤",
          score: 556,
        },
        {
          name: "谢广坤",
          score: 556,
        },
        {
          name: "谢广坤",
          score: 556,
        },
        {
          name: "谢广坤",
          score: 556,
        },
        {
          name: "谢广坤",
          score: 556,
        },
      ],

      btnShow: true,
      scrollTop: 0,
      old: {
        scrollTop: 0,
      },

      btnBoxWidthX: 400,
      btnBoxHeightX: 400,
      btnColorX: "#4BCAC0",
      btnImgSrcX: "../../../static/icon/gait_assess/pose.png",
      btnTextX: "开始评估",
      btnTextColorX: "#ffffff",
      btnTextSizeX: 25,
      btnImgWidthX: 180,
      btnRadiusX: 200,

      btnBoxWidthB: 400,
      btnBoxHeightB: 400,
      btnColorB: "#A5A5A5",
      btnImgSrcB: "../../../static/icon/training/blueTooth.png",
      btnTextB: "蓝牙未连接",
      btnTextColorB: "#ffffff",
      btnTextSizeB: 25,
      btnImgWidthB: 180,
      btnRadiusB: 200,

      btnBoxWidth: 300,
      btnBoxHeight: 300,
      btnColor: "#007AFF",
      btnImgSrc: "../../../static/icon/recovery_assess/info.png",
      btnText: "基本信息录入",
      btnTextColor: "#ffffff",
      btnTextSize: 20,
      btnImgWidth: 140,
      btnRadius: 150,

      list: [
        {
          name: "步态评估",
        },
        {
          name: "评估历史",
        },
      ],
      curNow: 0,

      show: false,
      content: "请打开手机蓝牙，连接康复设备",
      title: "蓝牙未连接",

      connect: false,
      writeInfo: true,
    };
  },
  onLoad(option) {
    console.log(option);
    this.getRank(option);
    this.getResult();
  },

  methods: {
    open() {
      this.show = true;
      this.connect = true;
      uni.navigateTo({
        url: "../../recovery-assess/trainScore-recovery/trainScore-recovery",
      });
    },
    playVideo(url) {
      //打开视频（全屏播放）

      console.log(url);
      this.videoContext = uni.createVideoContext(url);
      //this.videoContext.src = url
      this.isOpenVideo = true;

      this.videoContext.requestFullScreen({ direction: 180 });
      this.videoContext.play();
    },
    /**
     * 跳转到报告预览页面
     * @date 2023年6月8日10:08:31
     * */
    previewReport(item) {
      uni.navigateTo({
        url:
          "../../gait-assess/gait-report-detail/gait-report-detail?detailItem=" +
          encodeURIComponent(JSON.stringify(item)),
      });
    },
    //退出全屏时停止播放
    fullscreenchange(e) {
      console.log(e);
      if (!e.detail.fullScreen) {
        this.videoContext.stop();
        this.isOpenVideo = false;
      }
    },
    getResult() {
      var me = this;
      var usertoken = uni.getStorageSync("usertoken");
      var info = uni.getStorageSync("accountInfo");
      uni.request({
        url: me.serverUrl + "/Gait/getGaitResult",
        data: {
          openid: info.openid,
        },
        method: "POST",
        header: {
          usertoken: usertoken,
        },
        success(res) {
          console.log(res.data);
          if (res.data.status == 200) {
            me.trainScore = res.data.trainScore;
            me.percent = res.data.percent + "%";
          }
        },
      });
    },
    getRank(option) {
      var me = this;
      var usertoken = uni.getStorageSync("usertoken");
      var info = uni.getStorageSync("accountInfo");
      uni.request({
        url: me.serverUrl + "/Gait/getGaitRank",
        data: {
          openid: info.openid,
        },
        method: "POST",
        header: {
          usertoken: usertoken,
        },
        success(res) {
          console.log(res.data);
          if (res.data.status == 200) {
            console.log("=========================");
            console.log(res.data["data"]["poseList"]);
            console.log("=========================");
            let poseList = res.data["data"]["poseList"];
            if (poseList.length != 0) {
              me.dataList = poseList;
              me.rank = poseList[0]["score"];
            } else {
              me.dataList = poseList;
              me.rank = 0;
            }
            if (!!option.indexTab) {
              me.curNow = option.indexTab;
              me.btnShow = false;
            }
          }
        },
      });
    },
    jump() {
      // uni.navigateTo({
      // 	url: '../../my_module/health/info-date/info-date'
      // })
      uni.navigateTo({
        url: "../../my_module/health/ill-details/ill-details",
      });
    },
    sectionChange(index) {
      console.log("index", index);
      this.getRank();
      this.curNow = index;
      this.btnShow = !this.btnShow;
    },
    jump_assess() {
      uni.navigateTo({
        url: "../../gait-assess/gait-video/gait-video",
      });
    },
    jump_write() {
      this.writeInfo = false;
    },
    upper: function (e) {
      console.log(e);
    },
    lower: function (e) {
      console.log(e);
    },
    scroll: function (e) {
      // console.log(e)
      this.old.scrollTop = e.detail.scrollTop;
    },
    goTop: function (e) {
      this.scrollTop = this.old.scrollTop;
      this.$nextTick(() => {
        this.scrollTop = 0;
      });
      uni.showToast({
        icon: "none",
        title: "纵向滚动 scrollTop 值已被修改为 0",
      });
    },
  },
};
</script>

<style>
@import url("gait-assess.css");
</style>
